<template>
	<view>
		<view class="header-box">
			<view class="title">
				{{info.title}}
			</view>
			<view class="active-one-lists-head">
				<view class="active-one-lists-head-box">
					<image class="active-one-lists-head-img" :src="info.user.avatar" mode="">
					</image>
					<view class="active-one-lists-head-middle">
						<view class="active-one-lists-head-middle-top">
							<view class="name">
								{{info.user.user_nickname}}
							</view>
							<image class="girl-img"
								:src="info.user.gender == 1 ? '/static/image/Index/boy-icon.png' :'/static/image/Index/girl-icon.png'">
							</image>
							<image v-show="info.user.is_vip == true" class="vip-img"
								src="/static/image/Index/VIP-icon.png" mode=""></image>
						</view>
						<view class="active-one-lists-head-middle-bottom">
							距您156.km
						</view>
					</view>
				</view>
				<view class="active-one-lists-head-right" @click.stop="bm(info)">
					{{info.is_sign == true ? '已报名' : '报名'}}
				</view>
			</view>
			<image class="content-img" :src="info.url" mode=""></image>
			<view class="content-c">
				{{info.content}}
			</view>
			<view class="content-price">
				<view class="content-price-left">
					￥{{info.min_price}}-{{info.max_price}}/人
				</view>
				<view class="content-price-right">
					{{info.type}}
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title">活动地点</view>
			<view class="middle-content">
				<view class="middle-content-left">
					<image style="margin-bottom: 30rpx;" src="/static/image/activity/top.png" mode=""></image>
					<!-- <image src="/static/image/activity/bottom.png" mode=""></image> -->
				</view>
				<view class="middle-content-right">
					<view style="margin-top: -7rpx;">{{info.address}}</view>
					<!-- <view style="margin-top: 18rpx;" class="">二七区航海路北100米建业小区 </view> -->
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title">活动时间</view>
			<view class="time-box">
				<image src="/static/image/activity/time.png" mode=""></image>
				<view class="">
					{{info.start_time}}-{{info.end_time}}
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title">搭子需求</view>
			<view class="type-box">
				<view class="type-box-item" v-for="(item,index) in typeList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title" style="display: flex; justify-content: space-between;">
				<view class="">
					已报名(2)
				</view>
				<view class="" style="color: #f00;font-size: 22rpx;">
					仅剩2个名额
				</view>
			</view>
			<view class="type-box-user">
				<view class="type-user-item" v-for="(item,index) in userList" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="phone-box">
						{{item.phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-box-left">
				<view class="bottom-box-left-box" @click="navigateToChat(id)">
					<image src="/static/image/activity/s.png" mode=""></image>
					<view class="">
						群聊
					</view>
				</view>
				<view class="bottom-box-left-box" @click="privateChat(id)">
					<image src="/static/image/activity/q.png" mode=""></image>
					<view class="">
						私聊
					</view>
				</view>
				<view class="bottom-box-left-box" @click="$refs.selectPopup.open('bottom')">
					<image src="/static/image/activity/f.png" mode=""></image>
					<view class="">
						转发
					</view>
				</view>
			</view>
			<view class="bottom-box-right" @click="enter()">
				报名
			</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="selectPopup" :mask-click="true" type="bottom">
			<view class="pyq-box">
				<view class="pyq-box-top">
					<view class=""></view>
					<view class="">-分享到-</view>
					<image @click="$refs.selectPopup.close('bottom')" src="/static/image/activity/cancle.png" mode="">
					</image>
				</view>
				<view class="pyq-box-middle">
					<view class="pyq-box-content">
						<image src="/static/image/activity/wx.png" mode=""></image>
						<view class="">
							微信
						</view>
					</view>
					<view class="pyq-box-content">
						<image src="/static/image/activity/pyq.png" mode=""></image>
						<view class="">
							朋友圈
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TIM from '@/common/utils/tim';
	export default {
		data() {
			return {
				// 搭子需求
				typeList: ['周内早上通勤', '搭子', '长期搭子', '上下班通勤', '搭子', '周内通勤', '周内通勤', '周内通勤'],
				// 报名列表
				userList: [{
						img: '/static/image/Index/index-active1.png',
						phone: '13569486340'
					},
					{
						img: '/static/image/Index/index-active1.png',
						phone: '13569486380'
					},
					{
						img: '/static/image/Index/index-active1.png',
						phone: '13569486360'
					},
					{
						img: '/static/image/Index/index-active1.png',
						phone: '13569486321'
					},
				],
				id: '',
				info: {},
				id:''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDzListDetail()
		},
		methods: {
			async enter(){
				
			},
			
			// 检查用户是否已加入群聊
			async checkIfJoinedGroup(groupID) {
				try {
					const result = await this.$store.dispatch('im/getGroupList');
					if (result.success) {
						return result.data.some(group => group.groupID === groupID);
					}
					return false;
				} catch (error) {
					console.error('检查群聊成员错误:', error);
					return false;
				}
			},
			// 私聊
			privateChat(id){
				uni.navigateTo({
					url: `/pages/TUIKit/TUI-Chat/chat?conversationID=C2C${this.info.user.id}`
				});
			},
			// 群聊
			async navigateToChat(groupID) {
				try {
					// 显示加载提示
					uni.showLoading({
						title: '正在加入群聊...',
						mask: true
					});
					
					// 检查是否已加入群聊
					const isJoined = await this.checkIfJoinedGroup(groupID);
					
					if (isJoined) {
						// 已加入群聊，验证群成员身份
						console.log('检查群成员身份')
						const isMember = await this.$store.dispatch('im/verifyGroupMember', groupID);
						uni.hideLoading();
						
						if (isMember) {
							// 确认是群成员，直接跳转
							console.log('确认是群成员，跳转聊天')
							uni.navigateTo({
								url: `/pages/TUIKit/TUI-Chat/chat?conversationID=GROUP${groupID}`
							});
						} else {
							// 不是群成员，重新加入
							console.log('不是群成员，重新加入')
							this.$helper.toast('none', '需要重新加入群聊');
							await this.joinGroupAndNavigate(groupID);
						}
					} else {
						console.log('未加入群聊，开始加入')
						// 未加入群聊，先加入群聊
						await this.joinGroupAndNavigate(groupID);
					}
				} catch (error) {
					uni.hideLoading();
					console.error('群聊操作失败:', error);
					this.$helper.toast('none', '操作失败，请稍后重试');
				}
			},
			
			// 加入群聊并跳转的通用方法
			async joinGroupAndNavigate(groupID) {
				try {
					uni.showLoading({
						title: '正在加入群聊...',
						mask: true
					});
					
					const joinResult = await this.$store.dispatch('im/joinGroup', groupID);
					
					if (joinResult.success) {
						// 加入成功后，再次验证群成员身份
						console.log('加入成功，验证群成员身份')
						const isMember = await this.$store.dispatch('im/verifyGroupMember', groupID);
						
						uni.hideLoading();
						this.$helper.toast('none', '加入群聊成功！');
						uni.navigateTo({
							url: `/pages/TUIKit/TUI-Chat/chat?conversationID=GROUP${groupID}`
						});
						// if (isMember) {
						// 	// 确认加入成功，跳转到聊天页面
						// 	console.log('确认加入成功，跳转聊天')
						// 	this.$helper.toast('none', '加入群聊成功！');
						// 	uni.navigateTo({
						// 		url: `/pages/TUIKit/TUI-Chat/chat?conversationID=GROUP${groupID}`
						// 	});
						// } else {
						// 	// 加入失败，显示错误信息
						// 	console.log('加入后验证失败')
						// 	this.$helper.toast('none', '加入群聊失败，请稍后重试');
						// }
					} else {
						uni.hideLoading();
						console.log(joinResult)
						// 加入失败，显示错误信息
						const errorMsg = joinResult.data.status||'加入群聊失败，请稍后重试';
						console.log('加入失败:', errorMsg)
						// if()
						this.$helper.toast('none', errorMsg);
					}
				} catch (error) {
					uni.hideLoading();
					console.error('加入群聊失败:', error);
					this.$helper.toast('none', '加入群聊失败，请稍后重试');
				}
			},
			
			// 获取详情
			getDzListDetail() {
				this.$http.getDzListDetail({
					id: this.id,
					latitude:'34.035506',
					longitude:'113.852640'
				}).then(res => {
					if (res.code == '1') {
						this.info = res.data
					}
				})
			},
			// 报名
			bm(info){
				if(info.is_sign == true) return this.$helper.toast('none','您已报名，请勿重复报名!')
				this.$http.getDzLisBm({
					id: this.id
				}).then(res => {
					if (res.code == '1') {
						this.$helper.toast('none','报名成功!')
						this.getDzListDetail()
					}else{
						this.$helper.toast('none',res.msg)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.header-box {
		background-color: #fff;
		padding: 20rpx;

		.title {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		.active-one-lists-head {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.active-one-lists-head-box {
				display: flex;
			}

			.active-one-lists-head-img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.active-one-lists-head-middle {
				margin-left: 10rpx;

				.active-one-lists-head-middle-top {
					display: flex;
					align-items: center;

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.girl-img {
						width: 22rpx;
						height: 22rpx;
						margin: 0 10rpx;
					}

					.vip-img {
						width: 44rpx;
						height: 22rpx;
					}
				}

				.active-one-lists-head-middle-bottom {
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
				}
			}

			.active-one-lists-head-right {
				width: 128rpx;
				height: 50rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 50rpx;
				background-color: #000;
				color: #FEC92F;
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}

		.content-img {
			width: 100%;
			height: 800rpx;
			margin: 20rpx 0;
		}

		.content-c {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.content-price {
			display: flex;
			margin-top: 20rpx;

			.content-price-left {
				font-weight: 500;
				font-size: 24rpx;
				color: #FF0000;
			}

			.content-price-right {
				width: 80rpx;
				height: 32rpx;
				background-color: #999;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				line-height: 32rpx;
				margin-left: 20rpx;
			}
		}
	}

	.middle {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.title {
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			margin-bottom: 20rpx;
		}

		.middle-content {
			display: flex;
		}

		.middle-content-left {
			margin-right: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				display: block;
			}
		}

		.middle-content-right {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}

		.time-box {
			display: flex;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;

			image {
				width: 24rpx;
				height: 24rpx;
				margin: 2rpx 10rpx 0 0;
			}
		}

		.type-box {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.type-box-item {
				padding: 6rpx 6rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666666;
				line-height: 52rpx;
				margin-right: 15rpx;
			}
		}

		.type-box-user {
			margin-top: 20rpx;
			display: flex;

			.type-user-item {
				color: #666666;
				font-size: 24rpx;
				text-align: center;
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 6rpx;
				}

				.phone-box {
					width: 100rpx;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 隐藏超出内容 */
					text-overflow: ellipsis;
					/* 用省略号显示被隐藏部分 */
				}
			}
		}
	}

	.bottom-box {
		width: 100%;
		bottom: #fff;
		height: 120rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;

		.bottom-box-left {
			display: flex;

			.bottom-box-left-box {
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				margin-right: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
				}
			}
		}

		.bottom-box-right {
			width: 330rpx;
			height: 80rpx;
			background-color: #000;
			font-size: 32rpx;
			color: #FEC92F;
			text-align: center;
			line-height: 80rpx;
			border-radius: 20rpx;
		}
	}

	.pyq-box {
		width: 100%;
		height: 428rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;

		.pyq-box-top {
			display: flex;
			justify-content: space-between;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.pyq-box-middle {
			display: flex;
			justify-content: space-around;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			margin-top: 60rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>